<template>
  <div class="app-container">
    <div class="query-form">
      <el-form
        ref="queryForm"
        :model="queryParams"
        size="small"
        inline
        label-suffix=":"
      >
        <el-form-item
          :label="$t('harvestLang.customerName')"
          prop="customerId"
        >
          <el-select
            v-model="queryParams.customerId"
            :placeholder="$t('pleaseSelect')"
            clearable
            filterable
          >
            <el-option
              v-for="item in customerList"
              :key="item.value"
              :value="item.value"
              :label="item.title"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('createDate')"
          prop="gmtCreatedRange"
        >
          <el-date-picker
            v-model="queryParams.gmtCreatedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            :range-separator="$t('to')"
            :start-placeholder="$t('beginDate')"
            :end-placeholder="$t('endDate')"
            @change="changeDateRange"
          />
        </el-form-item>
        <el-form-item
          :label="$t('outboundOrderLang.orderVoteType')"
          prop="orderVoteType"
        >
          <el-select
            v-model="queryParams.orderVoteType"
            :placeholder="$t('pleaseSelect')"
            clearable
          >
            <el-option
              :value="0"
              :label="$t('statusLang.oneVoteForOnePiece')"
            />
            <el-option
              :value="1"
              :label="$t('statusLang.oneVoteForMoreThanOnePiece')"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="handleQuery"
          >
            {{ $t("query") }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh-left"
            @click="resetForm"
          >
            {{ $t("reset") }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="dataLoading" class="data-content">
      <div class="left">
        <div style="margin: 20px 0 0 10px">
          <span style="font-size: x-large">{{ $t('pick.provider') }}</span>
        </div>
        <el-divider />
        <el-table
          ref="multipleTable"
          stripe
          border
          :data="pickStatisticsList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            align="center"
            type="selection"
            width="55"
          />
          <el-table-column
            prop="providerChannelCode"
            :label="$t('pick.providerChannel')"
            show-overflow-tooltip
          />
        </el-table>
      </div>
      <div class="right">
        <div style="width: 100%">
          <el-row>
            <el-col :span="8">{{ $t('pick.orderNum') }}</el-col>
            <el-col :span="8">{{ $t('pick.skuCount') }}</el-col>
            <el-col :span="8">{{ $t('pick.skuNum') }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="8">{{ statisticsInfo.orderNum }}</el-col>
            <el-col :span="8">{{ statisticsInfo.skuCount }}</el-col>
            <el-col :span="8">{{ statisticsInfo.skuNum }}</el-col>
          </el-row>
          <el-row>
            <el-button
              style="margin: 40px 0 20px 0; width: 150px"
              type="primary"
              :loading="createPickLoading"
              :disabled="!(queryParams.providerChannelIds && queryParams.providerChannelIds.length > 0)"
              @click="createPick"
            >
              {{ $t("pick.create") }}
            </el-button>
          </el-row>
          <el-link style="font-size: large" type="primary" @click="settingDialogVisible = true">{{ $t("pick.setting") }}</el-link>
        </div>
      </div>
    </div>

    <el-dialog :title="$t('pick.setting')" :visible.sync="settingDialogVisible" width="40%">
      <el-form
        ref="settingForm"
        :model="settingRequest"
        label-suffix=":"
        label-position="right"
        label-width="150px"
      >
        <el-form-item
          :label="$t('pick.orderMaxCount')"
          prop="pickCount"
          :rules="[ { required: true, message: $t('pick.orderMaxCountRequired')} ]"
        >
          <el-input v-model="settingRequest.pickCount" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="settingDialogVisible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" :loading="updatePickSettingLoading" @click="updatePickSetting">{{ $t("confirm") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCustomerList } from '@/api/business/outboundManage/invoicing';
import { createPick, getPickSetting, queryPickStatistics, updatePickSetting } from '@/api/business/pick/pick';

export default {
  name: 'CreatePick',
  components: {},
  data() {
    return {
      dataLoading: false,
      settingDialogVisible: false,
      createPickLoading: false,
      updatePickSettingLoading: false,
      queryParams: {
        customerId: null,
        gmtCreatedRange: [],
        orderVoteType: null
      },
      customerList: [],
      pickStatisticsList: [],
      statisticsInfo: {},
      settingRequest: {},
    }
  },
  created() {
    this.getCustomerList();
    this.getPickStatistics();
    this.getPickSetting();
  },
  methods: {
    handleQuery() {
      this.getPickStatistics();
    },
    handleSelectionChange(rows) {
      this.calStatisticsInfo(rows);
    },
    resetForm() {
      this.$refs['queryForm'].resetFields();
      this.queryParams.gmtCreated = [];
      this.getPickStatistics();
    },
    createPick() {
      this.createPickLoading = true;
      createPick(this.queryParams).then((res) => {
        if (!res || res.returnCode !== 10000) return
        this.$message.success({
          message: this.$t('handleSuccess')
        })
        this.getPickStatistics();
      }).finally(() => {
        this.createPickLoading = false;
      })
    },
    updatePickSetting() {
      this.updatePickSettingLoading = true
      this.$refs['settingForm'].validate((valid) => {
        if (valid) {
          updatePickSetting(this.settingRequest).then((res) => {
            if (!res || res.returnCode !== 10000) return
            this.$message.success({
              message: this.$t('handleSuccess')
            })
            this.settingDialogVisible = false
          }).finally(() => {
            this.updatePickSettingLoading = false;
          })
        } else {
          this.updatePickSettingLoading = false;
        }
      });
    },
    async getCustomerList() {
      const { data } = await getCustomerList({})
      this.customerList = data || []
    },
    async getPickSetting() {
      const { data } = await getPickSetting({})
      this.settingRequest = data || {}
    },
    async getPickStatistics() {
      this.dataLoading = true
      const { data } = await queryPickStatistics(this.queryParams).finally(() => {
        this.dataLoading = false;
      })
      this.pickStatisticsList = data || []
      // this.calStatisticsInfo(this.pickStatisticsList);
      // this.$nextTick(() => {
      //   this.$refs.multipleTable.toggleAllSelection()
      // })
    },
    calStatisticsInfo(list) {
      let orderNum = 0; let skuCount = 0; let skuNum = 0; const providerChannelIds = [];
      list.forEach(item => {
        orderNum += item.orderNum;
        skuCount += item.skuCount;
        skuNum += item.skuNum;
        providerChannelIds.push(item.providerChannelId)
      });
      this.statisticsInfo = {
        orderNum: orderNum,
        skuCount: skuCount,
        skuNum: skuNum
      }
      this.queryParams.providerChannelIds = providerChannelIds;
    },
    changeDateRange(dateRange) {
      if (dateRange?.length > 0) {
        this.queryParams.gmtCreated = [dateRange[0] + ' 00:00:00', dateRange[1] + ' 23:59:59']
      } else {
        this.queryParams.gmtCreated = []
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.query-form {
  padding: 18px 18px 0 18px;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

  .el-form-item {
    margin-right: 40px;
  }
}

.data-content{
  margin-top: 10px;
  flex: 1;
  display: flex;
  flex-direction: row;

  .left {
    flex: 3;
    padding: 10px;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }

  .right {
    flex: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 10px;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
}
</style>
